<template>
  <div>
    <Row>
      <Card style="margin-top: 30px;">
        <Table :data="applyTable.details" :columns="columns1" border></Table>
        <Table :data="applyTable.commons" :columns="columns2" border></Table>
      </Card>
    </Row>
  </div>
</template>

<script>
import querystring from 'querystring';
import { HOST } from '../../libs/config.js';
import { loginInvalid } from "../../libs/loginInvalidNotice.js";

export default {
  data() {
    return {
      applyTable: {},
      ApplyTableStatus: [
        '未被审核',
        '部门主管审核通过',
        '部门主管驳回',
        '中心主管审核通过',
        '中心主管驳回',
        '已入库'
      ],
      isLoading: false,
      columns1:
      [
        {
          title: '物品类型',
          key: 'store_type',
          render: (h, params) => {
            let result = !params.row.store_type ? '' : h('Tag', {
              props: {
                color: 'blue'
              }
            }, params.row.store_type);
            return result;
          }
        },
        {
          title: '名称',
          key: 'name'
        }, 
        {
          title: '型号及主要技术指标数量',
          key: 'type',
          width: 220
        },
        {
          title: '数量',
          key: 'num'
        },
        {
          title: '采购预算(万元)',
          key: 'money'
        },
        {
          title: '推荐厂家',
          key: 'vender'
        },
        {
          title: '拟购时间',
          key: 'time',
          render: (h, params) => {
            return h('span', params.row.time);
            // new Date(parseInt(params.row.time) * 1000).toLocaleDateString().replace(/\//g, '-')
          }
        },
        {
          title: '用途',
          key: 'for'
        },
        {
          title: '设备安放地点',
          key: 'place'
        },
        {
          title: '.',
          align: 'center',
          render: (h, params) => {
            return h('Poptip', {
              props: {
              }
            }, 
            [
              h('i-button', {
                props: {
                  type: 'success'
                }
              }, '领用'),
              h('div', {
                slot: 'content'
              },[
                h('input-number',{
                  attrs: {
                    placeholder: '请输入要领用的数量'
                  },
                  props: {
                    min: 1,
                    max: parseInt(params.row.num)
                  },
                  style: {
                    width: '150px'
                  }
                }),
                h('br'),
                h('i-button',{
                  props: {
                    type: 'primary'
                  },
                  on: {
                    click: (e) => {
                      document.body.click();
                    }
                  }
                }, '取消'),
                h('i-button',{
                  props: {
                    type: 'success'
                  },
                  on: {
                    click: (e) => {
                      let value = e.target.parentElement.parentElement.querySelector('input').value;
                      this.$axios.post(HOST + '/store/receive',
                          querystring.stringify({
                            'item_id': params.row.item_id,
                            'num': value
                          }), {
                            withCredentials: true
                          })
                        .then((response) => {
                          if (response.data.status === 'success') {
                            this.$Notice.success({
                              title: '申请领用成功',
                              duration: 2
                            });
                          } else {
                            this.$Notice.error({
                              title: '申请领用失败',
                              duration: 2
                            });
                          }
                        })
                        .catch((err) => {
                          if (err.data.status === 'invalid Token') {
                            loginInvalid(this)();
                          }
                        })
                    }
                  }
                }, '确认')
              ])
            ])
          }
        }
      ],
      columns2: 
      [
        {
          title: '合计金额(万元)',
          key: 'sum_money'
        }, 
        {
          title: '经办人及联系电话',
          key: 'man_phone',
          width: 250
        },
        {
          title: '经费来源情况(项目名称及经费号)',
          key: 'expense'
        },
        {
          title: '部门审核负责人',
          key: 'dep_audit'
        },
        {
          title: '中心审核主管领导',
          key: 'center_audit'
        },
        {
          title: '中心审核主管领导',
          key: 'center_audit'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('Tag', {
              props:{
                color: this.getStatusColor(params.row.status)
              }
            }, this.ApplyTableStatus[parseInt(params.row.status)])
          }
        },


      ],
      stepList1: [],
      stepData: {
        title: '',
        describe: '',
        content: ''
      },
      step: {
        opinion: '',
        pass: ''
      },
      hasSubmit: false,
      currentStep: 0,
      status: 'wait'
    };
  },
  methods: {
    refreshProjectApplyList() {
      this.isLoading = true;
      this.$axios.get(HOST + `/project/details?table_id=${this.tableId}`, {
          withCredentials: true
        })
        .then((response) => {
          this.isLoading = false;
          let data = response.data;
          let result = {};
          result.commons = [];
          let commonObj = {};
          let keyList = Object.keys(data);
          keyList.forEach((key) => {
            if (key !== 'details' && key !== 'commons') {
              commonObj[key] = data[key];
            }
          })
          result.commons.push(commonObj[0]);
          this.$axios.get(HOST + `/project/goodsList?table_id=${this.tableId}`, {
              withCredentials: true
            })
            .then((res) => {
              result.details = res.data;
              result.details.forEach((_item) => {
                _item.table_id = data.table_id;
              })
              this.applyTable = result;
              
              this.$forceUpdate();
            });
        })
        .catch((err) => {
          if (err.data.status && err.data.status === 'invalid Token') {
            loginInvalid(this)();
          } else {

          }
        })
    },
    getStatusColor(status) {
      if (status === '0') {
        return 'gray'
      } else if (status === '2' || status === '4') {
        return 'red';
      } else if (status === '5') {
        return 'green';
      } else {
        return 'orange';
      }
    },
  },
  mounted() {
    this.refreshProjectApplyList();

  },
  computed: {
    projectId() {
      return this.$router.currentRoute.params.projectId;
    },
    projectName() {
      return this.$router.currentRoute.params.projectName;
    },
    tableId() {
      return this.$router.currentRoute.params.tableId;
    }
  },
};
</script>
